<!-- 专辑 -->
<template>
  <div class="album">
    <main>
      <a-row>
        <a-col :span="18" class="left-sec">
          <div class="music-info clearfix">
            <div class="img-box fl">
              <img :src="album.picUrl" :alt="album.description" />
              <span class="msk"></span>
            </div>
            <div class="text-box fl">
              <div class="title ">
                <span class="" />
                <h2 class="">{{ album.name }}</h2>
              </div>
              <p class="intr">
                歌手：<a href="">{{ album.artist.name }}</a>
              </p>
              <p class="intr">
                发行时间：{{ formatterTime(album.publishTime, 'yyyy-MM-dd') }}
              </p>
              <p class="intr">发行公司：{{ album.company }}</p>
              <div class="btn-box">
                <a-button-group>
                  <a-button
                    type="primary"
                    icon="play-circle"
                    title="播放"
                    @click="playList"
                  >
                    播放
                  </a-button>
                  <a-button type="primary" icon="plus" title="添加播放列表" />
                </a-button-group>
                <a-button icon="folder-add" title="收藏">收藏</a-button>
                <a-button icon="share-alt" title="分享"
                  >({{ dynamic.shareCount }})</a-button
                >
                <a-button icon="download" title="下载当前专辑">下载</a-button>
                <a-button icon="message" title="评论"
                  >({{ dynamic.commentCount }})</a-button
                >
              </div>
            </div>
            <div class="album-desc-dot fl">
              <h3>专辑介绍:</h3>
              <div class="album-desc-main">
                <div v-show="html_more" class="album-desc-main_text">
                  <div
                    class="html"
                    v-html="album.description.slice(0, 100)"
                  ></div>
                  <p v-show="album.description.length >= 100" class="clearfix">
                    <span class="fl">.......</span>
                  </p>
                </div>
                <div
                  v-show="!html_more"
                  class="html more"
                  v-html="album.description"
                ></div>
                <div v-if="album.description.length >= 100">
                  <span
                    v-show="html_more"
                    class="fr clearfix"
                    @click="html_more = !html_more"
                  >
                    <a class="fl" href="javascript:;">展开</a>
                    <a-icon class="fr" type="down" />
                  </span>
                  <span
                    v-show="!html_more"
                    class="fr clearfix"
                    @click="html_more = !html_more"
                  >
                    <a class="fl" href="javascript:;">收起</a>
                    <a-icon class="fr" type="up" />
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="music-list">
            <div class="music-list_title">
              <h4>
                包含歌曲列表<span>{{ songList.length }}首歌</span>
              </h4>
            </div>
            <div class="music-list_table">
              <a-table
                :columns="colums"
                :data-source="songList"
                :pagination="false"
                row-key="id"
                bordered
                :custom-row="playRowMusic"
              >
                <span slot="dt" slot-scope="scope">{{
                  (scope / 1000 / 60).toFixed(2)
                }}</span>
                <span slot="ar" slot-scope="scope">
                  <span
                    v-for="item in scope"
                    :key="item.id"
                    :title="item.name + '-' + item.tns"
                  >
                    <i>{{ item.name }}</i
                    ><em v-show="item.tns">-({{ item.tns }})</em>
                  </span>
                </span>
              </a-table>
            </div>
          </div>
        </a-col>
        <a-col :span="6" class="right-sec"></a-col>
      </a-row>
    </main>
  </div>
</template>

<script>
import { formatterTime } from '@/utils/time'
import defaultSettings from '@/static/default'
export default {
  validate({ params }) {
    return /^\d{3,}$/.test(params.id)
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error
  }) {
    const album = await store.dispatch('album', params.id)
    const dynamic = await store.dispatch('dynamic', params.id)
    if (!album) {
      return error({ statusCode: 500, message: 'Post not found' })
    }
    return {
      album: album.album,
      songList: album.songs,
      dynamic
    }
  },
  data() {
    const colums = [
      {
        width: 80,
        customRender: (text, row, index) => {
          return (
            <p class="play">
              <span>{index + 1} </span>
              <a-icon type="play-circle" data_id={row.id} />
            </p>
          )
        }
      },
      {
        title: '歌曲标题',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true
      },
      {
        title: '时长',
        dataIndex: 'dt',
        key: 'dt',
        width: 80,
        ellipsis: true,
        scopedSlots: { customRender: 'dt' }
      },
      {
        title: '歌手',
        dataIndex: 'ar',
        key: 'ar',
        width: 80,
        ellipsis: true,
        scopedSlots: { customRender: 'ar' }
      }
    ]
    return {
      colums,
      album: {},
      dynamic: {},
      songList: {},
      html_more: true
    }
  },
  beforeCreate() {
    this.$store.commit('set_showNav', true)
  },
  methods: {
    formatterTime,
    playRowMusic(row, index) {
      return {
        on: {
          click: async () => {
            const URL = `https://music.163.com/song/media/outer/url?id=${row.id}.mp3`
            const res = await this.$store.dispatch('getMusicDetail', row.id)
            const songs = res.songs[0]
            const musicObj = {
              name: songs.name,
              artist: songs.ar[0].name,
              source: URL,
              cover: songs.al.picUrl,
              id: row.id
            }
            this.$store.dispatch('setMusciList', musicObj)
            await this.$store.commit('Set_drawerFlag', true)
          }
        }
      }
    },
    async playList() {
      const list = this.songList
      const arr = []
      for (const key in list) {
        let obj = {}
        if (list[key].al) {
          const { al, ar, id, name } = list[key]
          const URL = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
          obj = {
            name,
            artist: ar[0].name,
            cover: al.picUrl,
            source: URL,
            id
          }
          arr.push(obj)
        }
      }
      this.$store.dispatch('setMusciList', arr)
      await this.$store.commit('Set_drawerFlag', true)
    }
  },
  head() {
    //* seo优化
    return {
      title: `${defaultSettings.title}-${this.album.name}/${this.album.artist.name}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `${defaultSettings.description},${this.album.name},${this.album.artist.name}`
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: `${defaultSettings.keywords},${this.album.name},${this.album.artist.name}`
        }
      ]
    }
  },
  scrollToTop: true
}
</script>

<style lang="scss" scoped>
.album {
  width: 100%;
  background: #f5f5f5;
  main {
    width: 980px;
    margin: 0 auto;
    min-height: 700px;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;
    background: #fff;
    .left-sec {
      padding: 47px 30px 40px 39px;
      border-right: 1px solid #d3d3d3;
      .music-info {
        .img-box {
          position: relative;
          width: 177px;
          height: 177px;
          img {
            width: 100%;
            height: auto;
          }
          .msk {
            display: block;
            position: absolute;
            z-index: 1;
            background: url('~assets/img/coverall.png') no-repeat 0 -986px;
            top: 0;
            left: 0;
            width: 209px;
            height: 100%;
          }
        }
        .text-box {
          margin-left: 50px;
          max-width: 436px;
          .title {
            margin-bottom: 10px;
            display: flex;
            span {
              width: 54px;
              height: 24px;
              background: url('~assets/img/icon1.png') no-repeat 0 -186px;
              display: block;
              margin-top: 4px;
              margin-right: 10px;
            }
            h2 {
              flex: 1;
              font-weight: 400;
              font-size: 20px;
            }
          }
          .intr {
            font-size: 12px;
            color: #666;
            line-height: 24px;
          }
          .btn-box {
            margin-top: 20px;
            /deep/ .ant-btn {
              padding: 0 8px !important;
            }
            /deep/.ant-btn-primary {
              color: #fff !important;
            }
          }
        }
        .album-desc-dot {
          width: 100%;
          margin-top: 20px;
          h3 {
            font-weight: 600;
          }
          .html {
            font-size: 12px;
            margin-top: 4px;
            line-height: 24px;
          }
          a {
            font-size: 12px;
          }
        }
      }
      .music-list {
        .music-list_title {
          margin-top: 8px;
          padding-bottom: 2px;
          border-bottom: 2px solid #c20c0c;
          h4 {
            font-size: 22px;
            span {
              margin-left: 20px;
              font-size: 12px;
              color: #666;
            }
          }
        }
        .music-list_table {
          .index {
            span {
              text-align: center;
            }
          }
          .play {
            display: flex;
            justify-items: center;
            justify-content: space-between;
            span {
              padding-top: 4px;
            }
            i {
              cursor: pointer;
              font-size: 20px;
            }
            i:hover {
              color: #c20c0c;
            }
          }
          /deep/tbody {
            tr {
              background: #f7f7f7;
              td {
                font-size: 12px;
                padding: 3px 12px;
              }
            }
            tr:nth-child(2n) {
              background: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
